<template>
  <div class="flow-preview">
    <div class="zoom-controls">
      <el-button-group>
        <el-button 
          size="mini" 
          icon="el-icon-zoom-in"
          @click="zoomIn"
        ></el-button>
        <el-button 
          size="mini" 
          icon="el-icon-zoom-out"
          @click="zoomOut"
        ></el-button>
        <el-button 
          size="mini" 
          icon="el-icon-refresh-right"
          @click="resetZoom"
        ></el-button>
      </el-button-group>
    </div>
    
    <div 
      class="flow-canvas" 
      ref="flowCanvas"
      :style="{ transform: `scale(${zoom})` }"
    >
      <div v-if="!data || !data.nodes || data.nodes.length === 0" class="no-data">
        <i class="el-icon-warning-outline"></i>
        <p>暂无流程数据</p>
      </div>
      
      <template v-else>
        <div class="flow-start">
          <div class="start-node">
            <i class="el-icon-s-platform"></i>
            <span>开始</span>
          </div>
          <div class="flow-connector"></div>
        </div>
        
        <div 
          v-for="(node, index) in data.nodes" 
          :key="index"
          class="flow-node-wrapper"
        >
          <div 
            class="flow-node"
            :class="getNodeClass(node.type)"
          >
            <div class="node-icon">
              <i :class="getNodeIcon(node.type)"></i>
            </div>
            <div class="node-content">
              <div class="node-title">{{ node.name }}</div>
              <div class="node-info">
                <template v-if="node.type === 'approval'">
                  <p v-if="node.approvalRole">审批角色: {{ getApprovalRoleName(node.approvalRole) }}</p>
                  <p v-if="node.approvalUsers && node.approvalUsers.length">
                    审批人员: {{ formatApprovalUsers(node.approvalUsers) }}
                  </p>
                </template>
                <template v-else-if="node.type === 'condition'">
                  <p>条件表达式: {{ node.condition || '未设置' }}</p>
                </template>
                <template v-else-if="node.type === 'parallel'">
                  <p>并行分支数: {{ node.branches || 2 }}</p>
                  <p>完成条件: {{ node.completeCondition === 'all' ? '全部分支完成' : '任一分支完成' }}</p>
                </template>
              </div>
            </div>
          </div>
          
          <!-- 连接线 -->
          <div v-if="index < data.nodes.length - 1" class="flow-connector">
            <i class="el-icon-arrow-down"></i>
          </div>
        </div>
        
        <div class="flow-end">
          <div class="flow-connector"></div>
          <div class="end-node">
            <i class="el-icon-s-release"></i>
            <span>结束</span>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: "FlowPreview",
  props: {
    data: {
      type: Object,
      default: null
    },
    userList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      zoom: 1.0
    };
  },
  methods: {
    // 放大
    zoomIn() {
      if (this.zoom < 1.5) {
        this.zoom += 0.1;
      }
    },
    
    // 缩小
    zoomOut() {
      if (this.zoom > 0.5) {
        this.zoom -= 0.1;
      }
    },
    
    // 重置缩放
    resetZoom() {
      this.zoom = 1.0;
    },
    
    // 获取节点类样式
    getNodeClass(type) {
      return `node-${type}`;
    },
    
    // 获取节点图标
    getNodeIcon(type) {
      const nodeMap = {
        'approval': 'el-icon-s-check',
        'condition': 'el-icon-share',
        'parallel': 'el-icon-s-operation'
      };
      return nodeMap[type] || 'el-icon-s-operation';
    },
    
    // 获取审批角色名称
    getApprovalRoleName(roleKey) {
      const roleMap = {
        'dept_manager': '部门经理',
        'director': '总监',
        'vice_president': '副总',
        'president': '总经理',
        'finance_manager': '财务负责人'
      };
      return roleMap[roleKey] || roleKey;
    },
    
    // 格式化审批人员
    formatApprovalUsers(userIds) {
      if (!userIds || !userIds.length) return '无';
      
      if (this.userList && this.userList.length > 0) {
        const userNames = userIds.map(id => {
          const user = this.userList.find(u => u.userId == id);
          return user ? user.userName : id;
        });
        return userNames.join(', ');
      } else {
        return userIds.join(', ');
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.flow-preview {
  position: relative;
  width: 100%;
  height: 100%;
  
  .zoom-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
  }
  
  .flow-canvas {
    padding: 40px 20px 20px;
    width: fit-content;
    min-width: 100%;
    margin: 0 auto;
    transition: transform 0.3s;
    transform-origin: center top;
    
    .no-data {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 200px;
      color: #909399;
      
      i {
        font-size: 32px;
        margin-bottom: 10px;
      }
    }
    
    .flow-start, .flow-end {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 20px;
      
      .start-node, .end-node {
        width: 100px;
        height: 40px;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        
        i {
          margin-right: 5px;
        }
      }
      
      .start-node {
        background-color: #e1f3d8;
        color: #67c23a;
        border: 1px solid #67c23a;
      }
      
      .end-node {
        background-color: #fef0f0;
        color: #f56c6c;
        border: 1px solid #f56c6c;
      }
      
      .flow-connector {
        height: 30px;
        width: 2px;
        background-color: #dcdfe6;
        margin: 5px 0;
      }
    }
    
    .flow-node-wrapper {
      margin-bottom: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .flow-node {
        width: 280px;
        padding: 15px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        display: flex;
        
        &.node-approval {
          border-left: 3px solid #409EFF;
          background-color: #ecf5ff;
        }
        
        &.node-condition {
          border-left: 3px solid #67C23A;
          background-color: #f0f9eb;
        }
        
        &.node-parallel {
          border-left: 3px solid #E6A23C;
          background-color: #fdf6ec;
        }
        
        .node-icon {
          margin-right: 10px;
          font-size: 24px;
          color: #606266;
        }
        
        .node-content {
          flex: 1;
          
          .node-title {
            font-weight: bold;
            margin-bottom: 8px;
          }
          
          .node-info {
            font-size: 13px;
            color: #606266;
            
            p {
              margin: 5px 0;
            }
          }
        }
      }
      
      .flow-connector {
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        
        &:before {
          content: '';
          position: absolute;
          top: 0;
          bottom: 0;
          left: 50%;
          width: 2px;
          background-color: #dcdfe6;
          transform: translateX(-50%);
        }
        
        i {
          position: relative;
          z-index: 1;
          background-color: #fff;
          color: #dcdfe6;
        }
      }
    }
  }
}
</style> 